<template>
  <div
    class="flex checkbox-con"
    :class="{ active: isActive }"
    @click="handleClick"
  >
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  checks: (string | number)[]
  value: string | number
}>()

const emits = defineEmits<{
  (e: 'changeValue', value: any): void
}>()

const isActive = computed(() => {
  return props.checks.includes(props.value)
})

const handleClick = () => {
  emits('changeValue', props.value)
}
</script>

<style scoped lang="scss">
.checkbox-con {
  // border: 1px solid #eee;
  justify-content: center;
  align-items: center;
  padding: 3px 14px;
  cursor: pointer;
  font-size: 13px;
  // border-radius: 3px;
  text-align: center;

  &:hover {
    background-color: #e4f2ff;
    border-color: #7ec1ff;
    color: $primaryColor;
  }

  &.active {
    background-color: $primaryColor;
    color: $bg-light-1;
  }
}
</style>
